<!-- 
  DatetimePicker 时间选择组件                 zls-2022/06/02
    所有属性、事件、方法、插槽，请参考  https://vant-contrib.gitee.io/vant/#/zh-CN/datetime-picker
 -->
<template>
  <Field
    class="z-input"
    v-model="data"
    :name="$attrs['name']"
    :label="$attrs['label']"
    :required="$attrs['required']"
    :rules="$attrs['required'] || $attrs['required'] === '' ? [{ required: true, message: '请选择' }] : []"
    :placeholder="$attrs['placeholder'] || '请选择'"
    :disabled="$attrs['disabled']"
    :readonly="$attrs['readonly'] || true"
    :border="$attrs['border']"
    :colon="$attrs['colon']"
    :clickable="$attrs['clickable']"
    :is-link="$attrs['is-link'] || true"
    :label-width="$attrs['label-width']"
    :autocomplete="$attrs['autocomplete']"
    @click="show = true"
  >
    <template #left-icon>
      <slot name="left-icon"></slot>
    </template>
    <template #right-icon>
      <z-svg name="chahao" v-if="data" @click.stop="clear"></z-svg>
    </template>
    <template #button>
      <slot name="button"></slot>
    </template>
    <template #extra>
      <slot name="extra"></slot>
    </template>
  </Field>

  <Popup
    v-model:show="show"
    :overlay="$attrs['overlay']"
    :position="$attrs['position'] || 'bottom'"
    :lock-scroll="$attrs['lock-scroll']"
    :close-on-click-overlay="$attrs['close-on-click-overlay']"
    :closeable="$attrs['closeable']"
    :close-icon="$attrs['close-icon']"
    :close-icon-position="$attrs['close-icon-position']"
    :safe-area-inset-bottom="true"
    round
    close-on-popstate
    @click-overlay="show = false"
    @click-close-icon="show = false"
  >
    <DatetimePicker
      v-model="currentDate"
      :type="$attrs['type'] || 'date'"
      :title="$attrs['title'] || '时间选择'"
      :show-toolbar="$attrs['show-toolbar']"
      :loading="$attrs['loading']"
      :readonly="$attrs['readonly']"
      :filter="$attrs['filter']"
      :formatter="$attrs['formatter']"
      :columns-order="$attrs['columns-order']"
      :min-date="$attrs['min-date']"
      :max-date="$attrs['max-date'] || maxDate"
      :min-hour="$attrs['min-hour']"
      :max-hour="$attrs['max-hour']"
      :min-minute="$attrs['min-minute']"
      :max-minute="$attrs['max-minute']"
      @confirm="confirm"
      @cancel="show = false"
    />
  </Popup>
</template>

<script>
export default { name: 'z-time' }
</script>
<script setup>
import { ref, useAttrs, watch } from 'vue'
import { Field, Popup, DatetimePicker } from 'vant'
import $day from 'dayjs'
const emit = defineEmits(['update:modelValue', 'clear', 'confirm'])
const attrs = useAttrs()
const data = ref('')
const show = ref(false) // 是否显示弹框
const maxDate = ref(new Date()) // 最大时间为今天
const currentDate = ref('') // 当前时间(时间插件使用)

// 格式化时间
const formatTimeObj = {
  time: 'HH:mm',
  'month-day': 'MM-DD',
  'year-month': 'YYYY-MM',
  date: 'YYYY-MM-DD',
  datehour: 'YYYY-MM-DD HH',
  datetime: 'YYYY-MM-DD HH:mm'
}
currentDate.value = attrs.type === 'time' ? attrs.modelValue : new Date(attrs.modelValue || $day()) // 初始化当前时间

// 实时更新数据
watch(
  () => attrs.modelValue,
  newVal => {
    if (attrs.type === 'time') {
      data.value = newVal ? newVal : ''
    } else {
      data.value = newVal ? $day(newVal).format(formatTimeObj[attrs.type]) : null
    }
  },
  { immediate: true, deep: true }
)

// 清空时间
function clear() {
  const time = attrs.type === 'time' ? '' : null
  emit('update:modelValue', time)
  emit('clear')
}

// 选中某一项后，点击确认按钮 { value: 前选中的时间 }
function confirm(value) {
  show.value = false
  const time = attrs.type === 'time' ? value : $day(value).format(formatTimeObj[attrs.type])
  emit('update:modelValue', time)
  emit('confirm', time)
}
</script>
